import cName from "classnames";
import styles from "./index.module.less";
import {
  PlayStart,
  Reload,
  ThumbsDown,
  ThumbsUp,
  Agenda,
  Link,
} from "@nutui/icons-react-taro";
import { useContext, useMemo, useState } from "react";
import { IconFont } from "@nutui/icons-react";
import SiweiIcon from "@/assets/chat/siwi/siwi-un.svg";
import { message } from "antd";
import { ACTON_OPTIONS, IMsgQuickActionProps } from "./type";
import { ChatContext } from "@/pages/BigScreen/context/store";
import { useGlobalData } from "@/pages/BigScreen/context/chat";

function MsgQuickAction(props: IMsgQuickActionProps) {
  const {
    msgContent,
    handleActionClick,
    handleActionFileList,
    handleFeedBackDownClick,
  } = props;
  const { reLoad, showActionLogList, showActionFileList, toPlay, toFeedback } =
    useContext(ChatContext);
  const { setSiweiVisible, setSiweiContent } = useGlobalData();

  const { resourceInfo, thinks } = useMemo(() => {
    const conInfo = msgContent?.messageBody;
    const contentInfo = conInfo?.contents?.[0];
    const resourceInfo: any | null =
      contentInfo?.metaData && contentInfo?.metaData?.resource_info
        ? JSON.parse(`${contentInfo?.metaData?.resource_info}`)
        : null;
    return {
      resourceInfo: resourceInfo,
      thinks: conInfo.thinks || [],
    };
  }, [msgContent]);

  const resourceList = useMemo(() => {
    let list: any[] = [];
    if (resourceInfo) {
      list = resourceInfo.resource_list;
    }
    return list;
  }, [resourceInfo]);

  const handleClick = (key = "") => {
    console.log("handleClick key ", key, msgContent);
    if (key === ACTON_OPTIONS.reload) {
      reLoad(msgContent);
    } else if (key === ACTON_OPTIONS.play) {
      toPlay(msgContent);
    } else if (key === ACTON_OPTIONS.thumbsUp) {
      toFeedback({
        feedback: ACTON_OPTIONS.thumbsUp,
        id: msgContent.id,
      });
    } else if (key === ACTON_OPTIONS.thumbsDown) {
      toFeedback({
        feedback: ACTON_OPTIONS.thumbsDown,
        id: msgContent.id,
      });
    } else {
      message.success("操作成功");
    }
  };
  const handleSiwi = () => {
    let content = thinks.map((item) => item.rightContent || "").join("");
    console.log("handleSiwi thinks", thinks);
    console.log("handleSiwi content", content);
    setSiweiContent(content);
    setSiweiVisible({
      visible: true,
      type: "view",
    });
  };

  return (
    <div className={styles["msg-quick-action-wrapper"]}>
      <div
        className={cName(styles["action-item"])}
        onClick={() => {
          handleClick(ACTON_OPTIONS.reload);
        }}
      >
        <Reload size=".8rem" />
        <div className={styles["action-label"]}>重新提问</div>
      </div>
      <div className={cName(styles["placeholder-item"])}></div>

      {/* 思维链 */}
      {/* {thinks && !!thinks.length && (
        <div
          className={cName(styles["action-item"], styles["right-item"], {})}
          onClick={() => {
            handleSiwi();
          }}
        >
          <IconFont
            className={styles["siwei-icon"]}
            name={SiweiIcon}
            size="0.8rem"
          />
        </div>
      )} */}

      {/* ! 来源文件 */}
      {/* {!!resourceList.length && (
        <div
          className={cName(styles["action-item"], styles["right-item"], {
            [styles["active"]]: showActionFileList.includes(msgContent.id),
          })}
          onClick={() => {
            handleActionFileList();
          }}
        >
          <Link size="1rem" />
        </div>
      )} */}

      <div
        className={cName(styles["action-item"], styles["right-item"], {
          [styles["active"]]: showActionLogList.includes(msgContent.id),
        })}
        onClick={() => {
          handleActionClick();
        }}
      >
        <Agenda size="1rem" />
      </div>
      {/* <div
        className={cName(styles["action-item"], styles["right-item"], {
          [styles["active"]]: msgContent.speaking,
        })}
        onClick={() => {
          handleClick(ACTON_OPTIONS.play);
        }}
      >
        <PlayStart size="1rem" />
      </div> */}
      <div
        className={cName(styles["action-item"], styles["right-item"], {
          [styles["active"]]: msgContent?.feedback === ACTON_OPTIONS.thumbsUp,
        })}
        onClick={() => {
          if (msgContent?.feedback === ACTON_OPTIONS.thumbsUp) {
            return;
          }
          handleClick(ACTON_OPTIONS.thumbsUp);
        }}
      >
        <ThumbsUp size="1rem" />
      </div>
      <div
        className={cName(styles["action-item"], styles["right-item"], {
          [styles["active"]]: msgContent?.feedback === ACTON_OPTIONS.thumbsDown,
        })}
        onClick={() => {
          if (msgContent?.feedback === ACTON_OPTIONS.thumbsDown) {
            return;
          }
          // handleClick(ACTON_OPTIONS.thumbsDown);
          handleFeedBackDownClick(msgContent);
        }}
      >
        <ThumbsDown size="1rem" />
      </div>
    </div>
  );
}

export default MsgQuickAction;
